<template>
  <div>
    <h2>【未使用toRef】解构后的名字:{{ name }}</h2>
    <h2>【使用了toRef】解构后的年龄:{{ age }}</h2>
    <h2>{{ user1.name }}--{{ user1.age }}</h2>
    <button @click="changeUser1">更改年龄</button>
  </div>
  <div>
    <h3>【使用toRefs】{{ email }}--{{ school }}</h3>
    <h3>【使用toRefs】{{ user2.email }}--{{ user2.school }}</h3>
    <button @click="changeUser2">更改信息</button>
  </div>
</template>

<script setup>
// 在Vue3对响应式对象进行解构赋值，会丢失响应式
// toRef解决解构赋值后,重新响应式对象上的一个属性
// toRefs解决解构赋值后,重新响应式对象上的所有属性
import { toRef, toRefs, reactive } from "vue";

const user1 = reactive({ name: "zzc", age: 20 });
const user2 = reactive({ email: "123@qq.com", school: "家里蹲" });
const { name } = user1;
const age = toRef(user1, "age");
const { email, school } = toRefs(user2);

const changeUser1 = () => {
  user1.age = 35;
  user1.name = "😀";
};
const changeUser2 = () => {
  user2.email = "123456789@qq.com";
  user2.school = "清华";
};
</script>

<style lang="scss" scoped>
</style>